<template>
	<div class="pcHeader">
		<div class="PcNav">
			<div><router-link  :to="`/pc/homePage`" >首页</router-link></div>
			<div>你好!,
				<router-link :to="`/pclogin`" v-show="username=='请登录'"> {{username}}</router-link>
				<router-link :to="`/pc/my`" v-show="username!='请登录'"> {{username}}</router-link>
			</div>
			<div><router-link :to="`/pc/enroll`"> 免费注册</router-link></div>
			<div> |<button   @click="orders">我的订单</button></div>
			<div><button  @click="cart">我的购物车|</button></div>
			<div> <button @click="clear()">退出</button> </div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'PcHeader',
		data() {
			return {
				username: '请登录',
				user: {},
				dialogFormVisible: false,
				form: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				},
				formLabelWidth: '120px',


			}
		},
		methods: {
			cart() {
				let token =  window.localStorage.getItem('token');
					if (token!=null){
						this.$router.push("/pc/cart")
					}else{
						alert("请先登录")
						this.$router.push("/pclogin")
					}
			},
			orders() {
				let token =  window.localStorage.getItem('token');
					if (token!=null){
						this.$router.push("/pc/orders")
					}else{
						alert("请先登录")
						this.$router.push("/pclogin")
					}
			},
			goLogin() {
				this.dialogFormVisible = true;
			},
			Login() {
				this.isLogin = false;
			},
			clear() {
				window.localStorage.removeItem('token');
				this.username = '请登录';
			}
		},
		mounted() {
			this.$get("/api/user/info")
				.then((resp) => {
					this.user = resp.data.data;
					this.username = resp.data.data.name
				})

		}
	}
</script>

<style>
	.pcHeader {
		width: 100%;
		height: 3.5rem;
		background-color: #e3e4e5;
		display: flex;
		align-items: center;
		justify-content: space-between;
		/* position: relative; //定位的元素保留原本的位置 */
		/* position: absolute; //定位的元素抛弃原本的位置，被其他标签顶替 */
		position: fixed;
		top: 0;
		z-index: 10;
	}

	.PcNav {
		display: flex;
		margin: auto;
	}

	.PcNav div {
		width: 10rem;
	}
</style>